<template>
	<view>
		<!--活动页面-->
		<view class="head-banner">
			<img src="@/static/images/event-banner.jpg" style="max-width: 100%;">
			<!-- <u-image width="100%" mode="widthFix" height="auto" src="/static/images/event-banner.jpg" :lazy-load="true"></u-image> -->
		</view>
		<view class="bg-pattern">
			<view class="circle circle-1">
				<view class="circle circle-2">
					<view class="circle circle-3">
						<view class="circle circle-4">
							<view class="circle circle-5"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="big-word">
			<view class="font-large">老带新</view>
			<view class="font-medium">邀请好友产品免费用</view>
			<view class="font-normal">邀请1名399会员，赠送3盒节加净（4片装）产品</view>
		</view>
		<view class="notice">
			{{recent_msg}}
		</view>
		<view class="round-card">
			<view class="title inside">会员活动</view>
			<view class="red-tips">你已获得盒产品</view>
			<view class="balance">{{page_data.total_bonus}}</view>
			<view class="right-side-tag">前往申领</view>
			<view class="gray-tips">活动限前10名邀请，全部激活得2980元车险基金</view>
			<view class="progress-bar">
				<view class="progress-active" :style="{width:page_data.invite_percent}"></view>
			</view>
			<view class="btn-box"><u-button @tap="openPage('/pages/ucp/invite-qrcode')" type="error" style="opacity: .8;" size="medium" shape="circle">邀请二维码</u-button></view>
			<view class="invite-code">邀请码：<text>{{user.id}}</text></view>
		</view>

		<view class="round-card">
			<view class="title inside">三步免费领产品</view>
			<view class="step-box">
				<view class="step">
					<u-image :lazy-load="true" class="icon-image" src="/static/images/event-add.png" width="80rpx" height="80rpx" mode="widthFix"></u-image>
					<text>邀请新人</text>
				</view>
				<view class="step">
					<u-image :lazy-load="true" class="icon-image" src="/static/images/event-reg.png" width="80rpx" height="80rpx" mode="widthFix"></u-image>
					<text>注册登陆</text>
				</view>
				<view class="step">
					<u-image :lazy-load="true" class="icon-image" src="/static/images/event-car.png" width="80rpx" height="80rpx" mode="widthFix"></u-image>
					<text>升级会员</text>
				</view>
			</view>
		</view>

		<view class="round-card">
			<view class="title inside">邀请请列表</view>
			<view class="invite-tips">活动限车力新会员参与，如何成为车力新会员（下单购买车力新套装的会员），活动限前10名会员，邀请1名新用户注册，即可激活298元车险基金。</view>
			<view class="step-box" style="margin-bottom: 50rpx;">
				<view class="step">
					<view class="red-num">{{page_data.invite_pending_reg}}</view>
					<text>在路上</text>
				</view>
				<view class="step">
					<view class="red-num">{{page_data.invite_completed}}</view>
					<text>成功邀请</text>
				</view>
				<view class="step">
					<view class="red-num">0</view>
					<text>失败邀请</text>
				</view>
			</view>
			<view class="user-list">
				<u-row gutter="1" v-for="(usr,index) in users" class="table-row">
					<u-col span="2" class="u-padding-20 u-flex">
						<u-avatar :src="usr.avatar"></u-avatar>
					</u-col>
					<u-col span="5">
						<view class="demo-layout u-line-1">{{usr.nickname||'UID:'+usr.id}}</view>
						<view class="demo-layout u-font-xs u-line-1">{{$u.timeFormat(usr.created, 'yyyy-mm-dd hh:MM:ss')}}</view>
					</u-col>
					<u-col span="5">
						<!-- <view class="demo-layout u-line-1 u-text-right">{{usr.total_spend}}</view> -->
						<view class="demo-layout u-font-xs u-line-1 u-text-right" :class="{green:usr.verified==='yes'}">{{usr.verified==='yes'?'已注册':'未注册'}}</view>
					</u-col>
				</u-row>
				<view style="padding-top:30rpx;box-sizing: border-box;text-align: center;" v-if="summary.total>10">
					<u-button size="medium" shape="circle" @click="openPage('/pages/ucp/my-referred')">查看更多</u-button>
				</view>
			</view>

		</view>

		<view class="copyright-tips">活动最终解释权归马孚博士爱车会所有，详情可咨询马孚博士爱车会客服</view>
		<wx-share :title='shop.name' :desc="shop.store_introduction" :imgUrl="shop.cover" link="/" ref="wxs"></wx-share>
		<u-toast ref="uToast"></u-toast>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				user: {},
				shop:{},
				car:{},
				users:[],
				page_data:{},//页面上的一些统计数据，从单独api获取
				recentLogs:[],
				recent_msg:'',
				summary:{
					total:0,
					consumption:0,
					commission_sum:0
				},
				paging: {
					current_page: 1,
					total_pages: 1,
					page_zie: 500
				},
				msg_timer:0
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		created() {
			this.getShop()
			this.getUserInfo()
			this.getEventPageData()
			this.getUsersList()
		},
		methods: {
			getUserInfo() {
				this.$u.post('/user/info', {}).then(res => {
					this.user = res;
					if(res.car && res.car.id>0){
						this.car = res.car
						if(res.car.phone_number && !res.car.mobile){
							this.car.mobile = res.car.phone_number
						}
						if(this.car.vin_image){
							this.fileList.push({url:this.car.vin_image})
						}
						if(this.car.front_image){
							this.frontImageList.push({url:this.car.front_image})
						}
						if(this.car.dashboard_image){
							this.dashboardImageList.push({url:this.car.dashboard_image})
						}
					}
					if (this.user.referral_id == 0) {
						this.user.referral_id = '';
					}
				}).catch(e => {
					console.log(e)
				})
			},
			getEventPageData(){
				this.$u.post('/user/event-page-data', {}).then(res => {
					this.page_data = res;
					if(res.recent_logs && res.recent_logs.length>0){
						for(let i=0;i<res.recent_logs.length;i++){
							this.recentLogs.push(res.recent_logs[i].mobile+' '+'已获得'+res.recent_logs[i].change+'元车险基金')
						}
						this.recent_msg = this.recentLogs[0]
						if(window.msg_timer){
							clearInterval(window.msg_timer)
						}
						window.msg_timer = setInterval(()=>{
							var randomIndex = Math.floor(Math.random() * this.recentLogs.length);
							this.recent_msg=this.recentLogs[randomIndex]
						},4000)
					}
				}).catch(e => {

				})
			},
			getShop() {
				this.$u.post('/shopping/shop-setting', {}).then(res => {
					this.shop = res;
				}).catch(e => {

				})
			},
			openPage(jumpURL, params = {}) {
				this.$u.route({
					type: 'to',
					params: params,
					url: jumpURL,
					animationType: 'slide-in-bottom'
				});
			},
			getUsersList() {
				this.$u.post('/user/my-referred-users', {}).then(res => {
					if (res.page.current_page === 1) {
						this.users = res.list;
						this.summary = res.summary;
					} else {
						this.users = this.users.concat(res.list)
					}
					this.paging.current_page = rea.page.current_page;
					this.paging.total_pages = res.page.total_pages;
					this.paging.page_size = res.data.page_size;
					this.tabList[0].cate_name='直接推广用户('+res.page.total_items+')'
				}).catch(e => {
					console.log(e)
				})
			},
		}
	}
</script>

<style>
	page{
		background-color: #195ED7;
		min-height: calc(100vh - 330px);
		position: relative;
	}
	.head-banner{
		margin: 30rpx;
		box-sizing: border-box;
		border-radius:20rpx;
		overflow: hidden;
		line-height: 0;;
	}
	.bg-pattern{
		position: absolute;
		display:block;
		top: 50vw;
		height: 100vw;
		width:100vw;
	}
	.circle{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.circle-1{
		width:100vw;
		height:100vw;
		background-color: rgba(255,255,255,.1);
		border-radius: 100%;
	}
	.circle-2{
		width:80vw;
		height:80vw;
		background-color: rgba(255,255,255,.1);
		border-radius: 100%;
	}
	.circle-3{
		width:60vw;
		height:60vw;
		background-color: rgba(255,255,255,.1);
		border-radius: 100%;
	}
	.circle-4{
		width:40vw;
		height:40vw;
		background-color: rgba(255,255,255,.1);
		border-radius: 100%;
	}
	.circle-5{
		width:20vw;
		height:20vw;
		background-color: rgba(255,255,255,.1);
		border-radius: 100%;
	}
	.big-word{
		padding: 50rpx;
		box-sizing: border-box;
		color: #FFF;
		text-align: center;
	}
	.big-word .font-large{
		font-size: 80rpx;
		font-weight: 300;
	}
	.big-word .font-medium{
		font-size: 60rpx;
		font-weight: 300;
	}
	.big-word .font-normal{
		font-size: 26rpx;
		font-weight: 300;
	}
	.notice{
		text-align: center;
		padding: 30rpx;
		box-sizing: border-box;
		color: #fff;
		font-size: 22rpx;
		background: radial-gradient(circle at center,rgb(140 2 2 / 76%),transparent);
		margin-bottom: 50rpx;
	}
	.round-card{
		background: #fff;
		border-radius: 20rpx;
		margin:30rpx;
		box-sizing: border-box;
		padding: 30rpx;
		position: relative;
		padding-top: 100rpx;
		margin-bottom: 50rpx;
	}
	.title.inside{
		display: inline-block;
		height: 80rpx;
		width: 240rpx;
		display: flex;
		text-align: center;
		position: absolute;
		top:0;
		left:50%;
		margin-left: -120rpx;
		background-color: #ffca00;
		display: flex;
		align-items: center;
		justify-content: center;
		color: brown;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		box-shadow: 0px 1px 0px 1px rgba(0,0,0,.1);
	}
	.red-tips{
		padding: 30rpx;
		text-align: center;
		color: #de0404;
	}
	.balance{
		font-size: 78rpx;
		text-align: center;
		color: red;
		margin-bottom: 50rpx;
	}
	.right-side-tag{
		position: absolute;
		right:0;
		top: 230rpx;
		background-color: #ffca00;
		color: darkgoldenrod;
		padding: 10rpx 20rpx;
		font-size: 22rpx;
		border-top-left-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		box-shadow: -1px 0px 1px 1px rgba(0,0,0,.1);
	}
	.gray-tips{
		text-align: center;
		color: gray;
		font-size: 22rpx;
		margin-bottom: 16rpx;;
	}
	.progress-bar{
		margin: 0 40rpx;
		height: 20rpx;
		border-radius: 20rpx;
		background-color: #ffd000;
		margin-bottom: 50rpx;
		position:relative;
		line-height: 0;
	}
	.progress-active{
		display: inline-block;
		background-color: #de0404;
		border-radius: 20rpx;
		height: 20rpx;
	}
	.btn-box{
		text-align: center;
		margin-bottom: 50rpx;
	}
	.invite-code{
		text-align: center;
		font-size: 24rpx;
		color: red;
	}
	.invite-code text{
		color: #195ED7;
	}
	.step-box{
		display:flex;
		flex-direction: row;
		padding-top: 20rpx;
	}
	.step{
		flex:1;
		display:flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.step .u-image{
		background-color: pink!important;
		padding:10rpx;
		display:flex;
		align-items: center;
		justify-content: center;
		overflow: hidden!important;
		border-radius: 80rpx!important;
	}
	.step text{
		font-size: 24rpx;
		color:rgba(0,0,0,.5);
		padding: 10rpx;
	}
	.invite-tips{
		color:rgba(0,0,0,.5);
		margin-bottom: 50rpx;
		font-size: 24rpx;
	}
	.red-num{
		font-size: 46rpx;
		color:red;
	}
	.copyright-tips{
		/* padding: 30rpx; */
		font-size: 24rpx;
		text-align: center;
		margin-bottom: 50rpx;
		color:darkorange;
	}

	/* user-list*/
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
		justify-content: flex-end;
	}

	.navbar-right {
		margin-right: 24rpx;
		display: flex;
		color: #5f6161;
	}

	.golden-code{
		font-size: 32rpx;
	}

	.green{
		color:darkgreen;
	}

	.u-demo-wrap {
		background-color: #ececec;
		padding: 20px 10px;
		border-radius: 3px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

  .balance {
    font-size: 66rpx;
  }

	.demo-layout {
		padding: 10rpx;
		box-sizing: border-box;
	}

	.demo-layout.u-font-xs {
		padding-top: 0;
		color: #8F8F94;
	}

	.demo-layout.green{
		color: #328a44;
	}
	.demo-layout.red{
		color:red;
	}

	.table-title {
		font-weight: 400;
		border-bottom: 1px solid #DDD;
		background-color: #FFF;
		padding: 18rpx 0;
	}

	.table-row {
		border-bottom: 1px dotted #DDD;
	}
</style>
